import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    Image,
    View,
    TextInput,
    Alert,
    FlatList,
    ScrollView,
    TouchableOpacity,
    ProgressBarAndroid,
} from 'react-native';
// import FriendCircleScene from '../friendCircle/friendCircleScene';
import FindItem from '../ui/findItem';
import TabLoadding from '../ui/tabLadding'
import pxToDp from '../config/pxToDp';
import Feather from 'react-native-vector-icons/Feather';
export default class DiscoverScene extends Component {
    static navigationOptions = {
        headerTitle: 'Home',
    };
    constructor(props){
        super(props)
        this.state ={
            loaddingState:0
        }
        setTimeout(()=>{
            this.setState({loaddingState:1})
        },1000)
    }
    _openFriendCircle(){
        // this.props.navigation.replace('accountLogin', { name: 'accountLogin' })
        this.props.navigation.navigate('FriendCircleScene')
    }
    render() {

        const itemList = [
            {
                icon:'gamepad-variant',
                iconBg: { backgroundColor: 'rgb(255,150,1)'},
                text:'游戏',
            },
            {
                icon: 'basket',
                iconBg: { backgroundColor: 'rgb(0,170,245)' },
                text: '购物',
                placeholder: '敬请期待'
            },
            {
                icon: 'basket',
                iconBg: { backgroundColor: 'rgb(154,210,34)' },
                text: '直播',
                placeholder: '敬请期待'
            },
            {
                icon: 'basket',
                iconBg: { backgroundColor: 'rgb(0,170,245)' },
                text: '音乐',
                placeholder: '敬请期待'
            },
            {
                icon: 'basket',
                iconBg: { backgroundColor: 'rgb(255,150,1)' },
                text: '电影',
                placeholder:'敬请期待'
            },
        ];
        if(this.state.loaddingState == 1){
            return (
                < ScrollView style={styles.viewPager} >
                    <View style={styles.pageStyle}>
                        <TouchableOpacity 
                            onPress={()=>{
                                console.log(this.props.navigation.navigate("friendCircleScene"))
                            }}>
                            <View style={styles.partend}>
                                <Image style={styles.imgLogo} source={require('../imgs/ic_friends_circle.png')} />
                                <View style={styles.partest}>
                                    <View style={styles.textTitle}>
                                        <Text style={styles.text}>朋友圈</Text>
                                    </View>
                                    <View style={styles.textrightpar}>
                                        <Feather name='chevron-right' size={20} style={styles.textright} ></Feather>
                                    </View>
                                </View>
                            </View>
                        </TouchableOpacity>
                        
                        <View style={styles.danditem}>
                            <FindItem icon={'qrcode-scan'} borderBottom={{borderBottomWidth:0}} iconBg={{ backgroundColor: 'rgb(154,210,34)', }} text='扫一扫'/>                        
                        </View>
                        <FlatList
                            data={itemList}
                            renderItem={({ item,index }) => <FindItem borderBottom={index == 4 ?{borderBottomWidth:0}:{}} icon={item.icon} iconBg={item.iconBg} text={item.text} placeholder={item.placeholder}/>}
                        />
                    </View>

                </ScrollView >
            )
        }else{
            return <TabLoadding />
        }

    }

}

const styles = {
    viewPager: {
        flex: 1,
        // background:'#fff', 
        
    },
    pageStyle: {
        alignItems: 'center',
        // padding: 20,
    },
    partend: {
        // flex:1,
        marginTop:15,
        marginBottom:15,
        height: 45,
        padding: 2.5,
        width: pxToDp(640),
        backgroundColor: "#fff",
        flexDirection: 'row',
    },
    imgLogo: {
        marginLeft: 5,
        marginRight: 10,
        height: 40,
        width: pxToDp(60),
    },
    danditem:{
        marginBottom:15,
    },
    partest: {
        width: pxToDp(545),
        height: 40,
        // justifyContent: 'center',
        flexDirection: 'row',
    },
    text: {
        color: 'rgb(40,40,40)',

    },
    textTitle: {
        justifyContent: 'center',
    },
    textrightpar: {
        flex: 1,
        justifyContent: 'center',
    },
    textright: {
        alignSelf: 'flex-end',
    },
    
}